<template>
    <div style="height:100%;">
        <navbar :title="this.$route.query.title" ></navbar>
        <div class="content" style="padding-bottom: 56px;">
            <div v-if="itmType === 'SELFSTUDY'" class="modal-title-box">{{ $t('online_learning_content') }}</div>
            <van-tabs v-else v-model="activeTab" @click="checkTab" style="min-width:55%" color=" #075ebb" title-active-color=" #075ebb" title-inactive-color="#999">
                <van-tab name="SELFSTUDY" :title="$t('online_learning_content')"></van-tab>
                <!-- 培训日程只有培训有 -->
                <van-tab name="CLASSROOM" :title="$t('training_schedule')"></van-tab>
            </van-tabs>
            <div v-if="activeTab === 'SELFSTUDY'" v-for="(item, index) in dataList" :key="index" class="list-item">
                <div class="item-text">
                    <div class="base-info">
                        <div class="user-group">
                            <i class="iconfont icon-24gf-play"></i>
                        </div>
                        <div class="name">{{item.resTitle || '--'}}</div>
                    </div>
                    <div class="appovel-title">
                        <i class="iconfont icon-leixing"></i>
                        <span>{{conType[item.resTypeStr]}}</span>
                    </div>
                    <div class="appovel-title">
                        <i class="iconfont icon-w_time"></i>
                        <span v-if="item.resEndTime">
                            {{ item.resStartTime}} {{$t('time_to')}} {{ item.resEndTime.includes('9999') ? $t('mod_unlimit') : item.resEndTime}}
                        </span>
                    </div>
                    <div v-if="item.resStatus==='OFF'" class="appovel-title">
                        <i class="iconfont icon-weifabu" style="color: #FFAE52;"></i>
                        <span>{{$t('lab_unpublished')}}</span>
                    </div>
                    <div v-else class="appovel-title">
                        <i class="iconfont icon-yifabu" style="color: #32B16C;"></i>
                        <span>{{$t('lab_published')}}</span>
                    </div>
                </div>
                <div class="button-box">
                    <div v-if="item.resStatus==='OFF'" class="pass-btn" @click="handleAllow(item.resId)">{{ $t('btn_publish') }}</div>
                    <div v-else class="refuse-btn" @click="handleRefuse(item.resId)">{{ $t('cancel_publish') }}</div>
                </div>
            </div>
            <div v-if="activeTab === 'CLASSROOM'"  style="height: 100%;" class="body-content" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getList"
                    style="padding-bottom: 56px;"
                    >
                        <div class="box2" v-bind:class="{'height100' : total === 0}">
                            <div v-for="(item, index) in dataList" :key="index" class="list-item">
                                <div class="item-text">
                                    <div class="base-info">
                                        <div class="user-group">
                                            <i class="iconfont icon-xiezuo-richeng-xiangqing-zhuti"></i>
                                        </div>
                                        <div class="name">{{item.ilsTitle || '--'}}</div>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-jiaoshi"></i>
                                        <template v-if="item.instructorList && item.instructorList.length > 0">
                                            <span v-for="(itx, i) in item.instructorList" :key="i">
                                                {{ itx.usrDisplayBil }}
                                            </span>
                                        </template>
                                        <template v-else>--</template>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-w_time"></i>
                                        <span>
                                            {{ item.ilsStartTime ? item.ilsStartTime : '--' }}
                                            {{$t('time_to')}}
                                            {{ item.ilsEndTime ? item.ilsEndTime.split(' ')[1].substring(0, item.ilsStartTime.split(' ')[1].lastIndexOf(':')) : '--' }}
                                        </span>
                                    </div>
                                    <div  class="appovel-title">
                                        <i class="iconfont icon-jiaoshi1"></i>
                                        <span>{{item.ilsPlace}}</span>
                                    </div>
                                </div>
                                <div class="button-box">
                                    <!-- <div v-if="item.ilsStatus===0" class="pass-btn" @click="handleAllow(item.ilsId)">{{ $t('btn_publish') }}</div>
                                    <div v-else class="refuse-btn" @click="handleRefuse(item.ilsId)">{{ $t('cancel_publish') }}</div> -->
                                    <div class="pass-btn" style="margin-left: 10px;" @click="getCode(item.qrCodePath)">{{ $t('sign_code') }}</div>
                                </div>
                            </div>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
            <!--暂无数据-->
            <div v-if="dataList.length === 0" style="height:100%;">
                <div class="box-table" style="width:100%;height:100%;">
                    <div class="box-table-cell" style="text-align: center;">
                        <div class="no-data">
                            <img src="../../../../static/images/no-data.png" alt=""/>
                            <p class="color999">{{ $t("no_data") }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 确定发布吗？ -->
        <van-dialog
        v-model="comfirmModal"
        show-cancel-button
        :title="$t('sure_pass_publish')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleAllowComfirm"
        >
        </van-dialog>
        <!-- 确定取消发布吗？ -->
        <van-dialog
        v-model="refuseComfirmModal"
        show-cancel-button
        :title="$t('sure_refuse_publish')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleRefuseComfirm"
        >
        </van-dialog>
        <!-- 签到码 -->
        <van-dialog
        v-model="showCode"
        show-cancel-button
        :showConfirmButton=false
        :title="$t('sign_code')"
        :cancelButtonText="$t('button_close')"
        >
        <div style="text-align: center;">
            <van-image width="150" height="100" :src="appUrl + codeUrl"/>
        </div>
        </van-dialog>
    </div>
  </template>

<script>
import { Tab, Tabs, Toast } from 'vant';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'courseManageDetail',
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        CommonLoading,
        vanToast: Toast
    },
    data() {
        return {
            activeTab: 'SELFSTUDY',
            itmId: this.$route.query.itmId,
            itmType: this.$route.query.itmType,
            dataList: [],
            comfirmModal: false,
            refuseComfirmModal: false,
            curItemId: null,
            isLoading: true,
            conType: { //模块类型
                TST: this.$t('mod_TST'), //静态测验
                DXT: this.$t('mod_DXT'), //动态测验
                ASS: this.$t('mod_ASS'), //作业
                SVY: this.$t('mod_SVY'), //课程评估问卷
                VOD: this.$t('mod_VOD'), //视频点播
                AUD: this.$t('mod_AUD'), //音频点播
                SCO: this.$t('mod_SCO'), //SCORM课件
                RDG: this.$t('mod_RDG'), //教材
                REF: this.$t('mod_REF'), //参考
                ACE: this.$t('mod_ACE'), // 问卷最新
                SCLASS: this.$t('SCLASS') // 微课
            },
            pageData: {
                pageNo: 1,
                pageSize: 5,
                searchText: '',
                itmId: this.$route.query.itmId
            },
            showCode: false,
            codeUrl: '',
            isTop: false,
            onFetching: false,
            total: 0,
            finished: false,
            isRefresh: false
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getList(option) {
            if (this.activeTab === 'SELFSTUDY') {
                this.isLoading = true;
                this.$axios.get(`/app/api/course/mobile/manage/online/${this.itmId}`).then((res) => {
                    this.dataList = res.data;
                    this.isLoading = false;
                });
            } else {
                this.isLoading = true;
                this.dataList = [];
                this.$axios.get(`/app/api/course/lesson/list`, {params: this.pageData}).then((res) => {
                    console.log('res.data', res.data);
                    if (res.data.results && res.data.results.length !== 0) {
                        if (option && option === 'refresh') {
                            this.dataList = res.data.results;
                        } else {
                            this.dataList = this.dataList.concat(res.data.results);
                        }
                    } else {
                        if (option && option === 'refresh') {
                            this.dataList = res.data.results;
                        }
                    }
                    this.total = res.data.totalRecord;
                    this.isLoading = false;
                    this.pageData.pageNo++;
                    if (this.dataList.length >= this.total) {
                        this.finished = true;
                    }
                });
            }
        },
        checkTab() {
            this.pageData.pageNo = 1;
            this.getList('refresh');
        },
        getCode(qrCodePath) {
            this.codeUrl = qrCodePath;
            this.showCode = true;
        },
        backFun() {
            this.$router.go(-1);
        },
        // 发布单行
        handleAllow(resId) {
            this.comfirmModal = true;
            this.curItemId = resId;
        },
        // 发布单行再次确认
        handleAllowComfirm() {
            const data = {
                resId: this.curItemId,
                operate: 'ON'
            };
            this.approvalApp(data);
        },
        // 取消发布单行
        handleRefuse(resId) {
            this.refuseComfirmModal = true;
            this.curItemId = resId;
        },
        // 取消发布单行再次确认
        handleRefuseComfirm() {
            const data = {
                resId: this.curItemId,
                operate: 'OFF'
            };
            this.approvalApp(data);
        },
        approvalApp(data) {
            this.$axios.put(`/app/api/course/mobile/manage/publish`, {}, {params: data}).then((res) => {
                this.getList();
                this.comfirmModal = false;
                this.refuseComfirmModal = false;
                Toast({message: this.$t('opreat_successs'), forbidClick: true});
            });
        }
    }
};
</script>

<style scoped lang='less'>
.header-left-title{
    line-height: 58px;
    font-size: 19px;
    color: #1B1B1B;
    padding-left: 52px;
}
.head-icon {
    font-size: 25px;
    margin: 17px 0 0 11px;
}
.modal-title-box{
    height: 44px;
    line-height: 44px;
    background: white;
    color: #075EBB;
    font-size: 15px;
    // padding-left: 15px;
    text-align: center;
}
.list-item{
    background: white;
    border-radius: 3px;
    margin: 15px;
    padding: 15px 20px 30px;
    position: relative;
    .item-text{
        .base-info{
            display: flex;
            // justify-content: space-between;
          align-items: center;
            margin-bottom: 20px;
            .name{
                font-size: 15px;
                color: #333333;
                width: 80%;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                // height: 40px;
            }
            .user-group{
                font-size: 12px;
                margin-right: 15px;
                i{
                color: #075EBB;
                }
            }
        }
        .appovel-title{
            display: flex;
            margin-bottom: 10px;
            align-items: center;
            i{
                color: #C9C9C9;
                font-size: 18px;
            }
            span{
                margin-left: 8px;
                font-size: 12px;
                color: #666666;
            }
        }
    }
    .button-box{
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        bottom: 15px;
        right: 20px;
        div{
                font-size: 14px;
                border-radius: 3px;
                display: inline-block;
                width: 94px;
                height: 31px;
                text-align: center;
                line-height: 31px;
                box-sizing: border-box;
        }
        .pass-btn{
            border: 1px solid #075EBB;
            color: #075EBB;
        }
        .refuse-btn{
            margin-left: 15px;
            border: 1px solid #E63442;
            color: #E63442;
        }
    }
}
</style>
